<template>
  <div :class="['v-application--wrap', {
    'menu-collapse': menuCollapse
  }]">
    <v-header
      @menu-collapse="handleMenuCollapse"
      @on-logout="handleLogout"
      @on-refresh="handleRefresh"
      @on-change-theme="handleChangeTheme"
      :account="account"
      :breadList="breadList"
    />
    <nav class="v-navigation">
      <div class="v-navigation__image">
        <div class="v-image">
          <div :class="['v-image__image ', 'v-image__image--cover', sidebarTheme]"></div>
        </div>
      </div>
      <div class="v-navigation__content" style="height:calc(100% - 55px);padding-bottom:10px;" ref="navigationContent">
        <div class="v-logo" @click="handleMenuCollapse">
          <div class="v-logo__content">
            <span class="logo-mini">生鲜</span>
            <span class="logo-normal">商城管理</span>
          </div>
        </div>
        <div class="v-divider"></div>
        <scroll-view simple ref="navigationScrollbar">
          <v-menu :collapse="menuCollapse" :menus="menus" :activePath="activePath" style="height:100%"/>
        </scroll-view>
      </div>
    </nav>

    <main class="v-content">
      <div class="v-content__wrap" v-loading="loading">
        <page>
          <transition name="el-fade-in-linear" mode="out-in">
            <router-view v-if="rendered" />
          </transition>
        </page>
      </div>
    </main>
    <Chat v-if="isStartOrderTimer" />
  </div>
</template>
<script>
import { logout } from '@/api'
import { mapGetters, mapState } from 'vuex'
import VHeader from './header/Header'
import VMenu from './menu/Menu'
import Chat from '../chat/Chat'
import {
  addResizeListener,
  removeResizeListener
} from '@/utils/dom'

const FAKE_REFRESH_DELAY = 300

const THEME_SIZE = 3

export default {
  name: 'Main',
  components: {
    VHeader,
    VMenu,
    Chat
  },
  data () {
    return {
      loading: false,
      rendered: true,
      breadList: [],
      activePath: this.$route.path
    }
  },
  computed: {
    ...mapState('user', ['account']),
    ...mapGetters('app', ['menuCollapse', 'menus']),
    ...mapGetters(['isStartOrderTimer', 'sidebarTheme']),
    sidebarThemeIndex () {
      return this.sidebarTheme.match(/.*-(\d)$/)[1] % THEME_SIZE + 1
    }
  },
  methods: {
    // Requests
    // ------------------------------------------------------------
    logout ({ onOk, onError }) {
      return this.Catch(logout, {
        onOk,
        onError
      })(null, this.account.id)
    },

    // Private
    // --------------------------------------------------------------
    handleLogout () {
      this.ConfirmLogout({
        onOk: () => {
          this.logout({
            onOk () {
              this.$store.dispatch('user/doLogout').then(() => {
                this.$router.push('/login')
              })
            }
          })
        }
      })
    },
    handleMenuCollapse () {
      this.$store.dispatch('app/setCollapse', !this.menuCollapse)
    },

    handleChangeTheme () {
      let sidebarThemeIndex = ++this.sidebarTheme.match(/.*-(\d)$/)[1] % THEME_SIZE + 1
      this.$store.dispatch('app/setSidebarTheme', `theme-${sidebarThemeIndex}`)
    },

    handleRefresh () {
      // this.loading = true
      this.rendered = false
      setTimeout(() => {
        this.rendered = true
        // this.loading = false
      }, FAKE_REFRESH_DELAY)
    }
  },
  mounted () {
    addResizeListener(this.$refs.navigationContent, this.$refs.navigationScrollbar.update)
  },
  beforeDestroy () {
    removeResizeListener(this.$refs.navigationContent, this.$refs.navigationScrollbar.update)
  },
  watch: {
    $route: {
      immediate: true,
      handler (val) {
        if (val) {
          const { matched } = val
          const validRoutes = matched
            .filter(v => v.name && v.meta && v.meta.title)
            .map(v => {
              return {
                title: v.meta.title,
                path: v.path
              }
            })
          this.breadList = validRoutes
          let paths = val.path.split('/').filter(Boolean)
          this.activePath = '/' + paths.slice(0, 2).join('/')
        }
      }
    }
  }
}
</script>
